<html>
<head>
  <title>Talking Alarm Clock</title>
  <link href='http://fonts.googleapis.com/css?family=Nova%20Mono' rel='stylesheet' type='text/css'>
  <style>
    body {
      overflow: hidden;
      margin-top: 0px;
    }
    #main {
      width: 200px;
      font-family: arial, helvetica, sans-serif;
      font-size: 13;
    }
    #clock {
      cursor: pointer;
    }
    .alarm_wrap {
      margin-top: 6px;
      padding: 6px;
      background-color: #dfd;
      border: 1px solid #aaa;
      border-radius: 4px;
    }
    .alarm_wrap.disabled {
      background-color: #eee;
    }
    .alarm_wrap[aria-invalid] {
      background-color: #f99;
    }
    .alarm_wrap[aria-invalid] input {
      color: #900;
    }
    .alarm_wrap input {
      font-size: 20;
    }
    .alarm_wrap input[type=time] {
      font-size: 20;
      width: 85px;
    }
    .alarm_wrap.disabled input {
      color: #999;
    }
    .ctrl_label { 
      float: left;
      width: 100%;
      margin-top: 6px;
    }
    .ctrl_wrap {
      width: 200px;
      float: left;
    }
    .ctrl_wrap input[type=range] {
      width: 180px;
      height: 16px;
    }
    .buttons {
      margin-top: 10px;
    }
    .voice_options {
    }
    #sound {
      float: left;
      width: 160px;
      margin: 8px 0px;
    }
    #playsound {
      padding: 5px;
      margin: 5px;
    }
    #phrase {
      float: left;
      width: 160px;
    }
    #playspeech {
      padding: 5px;
      margin: 5px;
    }
    #a1_tt {
      font-family: Nova Mono;
      height: 34px;
    }
    #a2_tt {
      font-family: Nova Mono;
      height: 34px;
    }
    #a1_ampm {
      font-family: Nova Mono;
    }
    #a2_ampm {
      font-family: Nova Mono;
    }
    #current_time {
      font-family: Nova Mono;
      font-size: 24;
      height: 32px;
    }
    body.nooutline * {
      outline: none;
    }
    .footer {
      clear:left;
    }
  </style>
  <script src="common.js"></script>
  <script src="popup.js"></script>
</head>
<body>

<div id="main">

  <center>
    <canvas id="clock" width="150" height="150"
            role="button" tabindex="0"></canvas>
    <div id="current_time">00:00:00</div>
  </center>

  <div id="a1_wrap" class="alarm_wrap">
    <label for="a1_on">Alarm 1</label>
    <br>
    <input id="a1_on" type="checkbox">
    <input id="a1_tt" type="time" step="300" size="5">
    <select id="a1_ampm">
      <option>AM</option>
      <option selected>PM</option>
    </select>
  </div>
  <div id="a2_wrap" class="alarm_wrap">
    <label for="a2_on">Alarm 2</label>
    <br>
    <input id="a2_on" type="checkbox">
    <input id="a2_tt" type="time" step="300" size="5">
    <select id="a2_ampm">
      <option>AM</option>
      <option selected>PM</option>
    </select>
  </div>

  <div class="voice_options">
    <div>
      <div class="ctrl_label">
        <label for="sound">Sound:</label>
      </div>
      <div class="ctrl_wrap">
        <select id="sound" class="ctrl">
          <option value="none">None</option>
          <option selected value="cuckoo">Cuckoo Clock</option>
          <option value="digital">Digital Alarm Clock</option>
          <option value="metal">Metal</option>
          <option value="ringing">Ringing Alarm Clock</option>
          <option value="rooster">Rooster</option>
        </select>

        <button id="playsound" title="Play Sound">
          <img src="play.png">
        </button>
      </div>

      <div class="ctrl_label">
        <label for="sound">Phrase (use $TIME to say time):</label>
      </div>
      <div class="ctrl_wrap">
        <textarea id="phrase"></textarea>

        <button id="playspeech" title="Play Speech">
          <img src="play.png">
        </button>
      </div>

      <div class="ctrl_label">
        <label for="voice">Voice:</label>
      </div>
      <div class="ctrl_wrap">
        <select id="voice" class="ctrl"></select>
      </div>

      <div class="ctrl_label">
        <label for="rate">Speech rate:</label>
      </div>
      <div class="ctrl_wrap">
        <input id="rate" type="range" class="ctrl"
               min=0.5 max=1.5 step=0.1 value=1.0></input>
      </div>

      <div class="ctrl_label">
        <label for="volume">Speech and sound volume:</label>
      </div>
      <div class="ctrl_wrap">
        <input id="volume" type="range" class="ctrl"
               min=0.0 max=1.0 step=0.1 value=1.0></input>
      </div>
    </div>
  </div>

  <div class="footer">
    <a href="credits.html" target="_blank">Credits</a>
    &nbsp;|&nbsp;
    <a href="https://chrome.google.com/webstore/search?q=tts"
       target="_blank">Get more voices</a>
  </div>

</div>

</body>
</html>
